<template>
<div class="app-container">
  <loading v-show="loading"></loading>
  <el-card class="box-card  searchBox searchFormStyle" style="margin-bottom:1%;">
    <div slot="header" class="clearfix">
      <span>党员信息操作</span>
    </div>
    <div class="text item">
      <el-form ref="SearchDep" :model="SearchDep" label-width="130px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="党员姓名">
              <el-input v-model="SearchDep.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号">
              <el-input v-model="SearchDep.idNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="入党时间" prop="joinPartyDate">
                <el-date-picker
                  v-model="joinPartyDates"
                  type="daterange"
                  @change="getDates"
                  value-format="yyyy-MM-dd"
                  start-placeholder="入党时间"
                  end-placeholder="入党时间"
                  :default-time="['00:00:00', '23:59:59']"
                  >
                </el-date-picker>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row>
              <el-col :span="8">
              <el-form-item label="党组织机构" class="tree-input" prop="partyOrgInfoKey">
                  <el-input type="hidden" v-model="SearchDep.partyOrgKey" auto-complete="off" style="height:0;display:inline;"></el-input>
                  <el-popover
                    placement="bottom"
                    width="400"
                    trigger="click">
                    <el-tree
                      :data="partyOrgData"
                    :props="partyProps"
                    ref="partyOrgTree"
                    node-key="partyOrgKey"
                    :default-checked-keys="[addForm.partyOrgInfoKey]"
                    accordion
                    @node-click="handleNodeClick"
                      >
                    </el-tree>
                    <el-input v-model="SearchpartyOrgName"  slot="reference" readonly></el-input>
                  </el-popover>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="党内职务" prop="sysOrgPost">
                  <el-select v-model="SearchDep.sysOrgPost" placeholder="请选择用户角色">
                    <el-option
                      v-for="item in sysOrgPostList"
                      :key="item.paramValue"
                      :label="item.paramName"
                      :value="item.paramValue">
                    </el-option>
                  </el-select>
                </el-form-item>
            </el-col>
              <el-col :span="8">
                <el-form-item label="转正时间" prop="formalPartyDate">
                  <el-date-picker
                    v-model="formalPartyDates"
                    type="daterange"
                    @change="getDateOther"
                    value-format="yyyy-MM-dd"
                    start-placeholder="转正时间"
                    end-placeholder="转正时间"
                    :default-time="['00:00:00', '23:59:59']"
                    >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          <el-row>
            <el-col>
              <el-form-item>
                <el-button type="primary" 
                icon="el-icon-search" 
                v-if="permissionHandle('partyUser:getList')"
                @click="getList">查 询</el-button>
                <el-button type="primary" 
                icon="el-icon-refresh" 
                v-if="permissionHandle('partyUser:getList')"
                @click="resetSearch">重 置</el-button>
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>
    </div>
  </el-card>
  <el-card class="box-card" style="margin-bottom:1%;">
    <div slot="header" class="clearfix">
      <span>党员信息列表</span>
    </div>
    <el-table
      :data="tableData"
      ref="tableData"
      border
      style="width: 100%;margin-bottom:1%;"
      >
      <el-table-column
        label="党员姓名"
        width="150"
       >
        <template slot-scope="scope">
            {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column
        label="所属党组织机构"
        width="180"
       >
        <template slot-scope="scope">
            {{ scope.row.partyOrgInfoKey }}
        </template>
      </el-table-column>
      <el-table-column
        label="性别"
        width="50"
       >
        <template slot-scope="scope">
            {{ scope.row.sex }}
        </template>
      </el-table-column>
      <el-table-column
        label="民族"
         width="80"
       >
        <template slot-scope="scope">
            {{ scope.row.nation }}
        </template>
      </el-table-column>
      <el-table-column
        label="身份证号"
        width="180"
      >
        <template slot-scope="scope">
            {{ scope.row.idNumber }}
        </template>
      </el-table-column>
      <el-table-column
        label="党内职务"
        width="180"
      >
        <template slot-scope="scope">
            {{ scope.row.sysOrgPost }}
        </template>
      </el-table-column>
      <el-table-column
        label="人员类别"
      >
        <template slot-scope="scope">
            {{scope.row.type  }}
        </template>
      </el-table-column>
      <el-table-column
        label="入党时间"
         width="150"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.joinPartyDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="转正时间" width="150">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.formalPartyDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系电话" width="180">
        <template slot-scope="scope">
          {{ scope.row.phone }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-document"
            v-if="permissionHandle('partyUser:handleDetails')"
            @click="handleDetail(scope.$index, scope.row)">详细</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" :paginations="paginations"></pagination>
  </el-card>
  <!--新增角色-->
  <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="80%">
    <el-form :model="addForm"  disabled ref="addForm" label-position="right" label-width="140px" class="detailStyle">
      <el-row>
          <el-col :span="8">
            <span class="labelSpan">
              党员姓名:
            </span>
            <span class="valueSpan">
              {{addForm.name}}
            </span>
          </el-col>
          <el-col :span="8">
            <span class="labelSpan">
              联系电话:
            </span>
            <span class="valueSpan">
              {{addForm.phone}}
            </span>
          </el-col>
          <el-col :span="8">
            <span class="labelSpan">
              所属党组织机构:
            </span>
            <span class="valueSpan">
              {{addForm.partyMemberInfoKey}}
            </span>
          </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <span class="labelSpan">
            身份证号:
          </span>
          <span class="valueSpan">
            {{addForm.idNumber}}
          </span>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别:" prop="sex">
            <el-select v-model="addForm.sex"  placeholder="请选择性别" style="width:100%;">
              <el-option
                v-for="item in SEX"
                :key="item.paramValue"
                :label="item.paramName"
                :value="item.paramValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="民族:" prop="nation">
            <el-select v-model="addForm.nation"  placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in NATION"
                :key="item.paramValue"
                :label="item.paramName"
                :value="item.paramValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <span class="labelSpan">
            籍贯:
          </span>
          <span class="valueSpan">
            {{addForm.natives}}
          </span>
        </el-col>
        <el-col :span="8">
          <el-form-item label="台湾户籍:" prop="isTwNative">
            <el-select v-model="addForm.isTwNative"  placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in ISNOT"
                :key="item.paramValue"
                :label="item.paramName"
                :value="item.paramValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <span class="labelSpan">
            出生日期:
          </span>
          <span class="valueSpan">
            {{addForm.birthday}}
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="学历:" prop="education">
            <el-select v-model="addForm.education"  placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in EDUCATION"
                :key="item.paramValue"
                :label="item.paramName"
                :value="item.paramValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="人员类别:" prop="type">
            <el-select v-model="addForm.type"  placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in TYPE"
                :key="item.paramValue"
                :label="item.paramName"
                :value="item.paramValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <span class="labelSpan">
            入党时间:
          </span>
          <span class="valueSpan">
            {{addForm.joinPartyDate}}
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <span class="labelSpan">
            转正时间:
          </span>
          <span class="valueSpan">
            {{addForm.formalPartyDate}}
          </span>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工作岗位类型:" prop="post">
            <el-select v-model="addForm.post"  placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in POST"
                :key="item.paramValue"
                :label="item.paramName"
                :value="item.paramValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <span class="labelSpan">
            参加工作时间:
          </span>
          <span class="valueSpan">
            {{addForm.joinWorkDate}}
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <span class="labelSpan">
            家庭住址:
          </span>
          <span class="valueSpan">
            {{addForm.address}}
          </span>
        </el-col>
        <el-col :span="8">
          <span class="labelSpan">
            联系电话:
          </span>
          <span class="valueSpan">
            {{addForm.mobilePhone}}
          </span>
        </el-col>
        <el-col :span="8">
          <el-form-item label="婚姻状况:" prop="maritalStatus">
            <el-select v-model="addForm.maritalStatus"  placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in MARITALSTATUS"
                :key="item.paramValue"
                :label="item.paramName"
                :value="item.paramValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <span class="labelSpan">
            档案管理单位:
          </span>
          <span class="valueSpan">
            {{addForm.archivesMngUnit}}
          </span>
        </el-col>
        <el-col :span="8">
          <el-form-item label="聘任专业技术职务:" prop="technicalPosition">
            <el-select v-model="addForm.technicalPosition"  placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in TECHNICALPOSITION"
                :key="item.paramValue"
                :label="item.paramName"
                :value="item.paramValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <span class="labelSpan">
            一线情况:
          </span>
          <span class="valueSpan">
            {{addForm.frontlineSituation}}
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="新社会阶层类型:" prop="newSocialType">
            <el-select v-model="addForm.newSocialType"  placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in NEWSOCIALTYPE"
                :key="item.paramValue"
                :label="item.paramName"
                :value="item.paramValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否农民工:" prop="isMigrantWorker">
            <el-select v-model="addForm.isMigrantWorker"  placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in ISNOT"
                :key="item.paramValue"
                :label="item.paramName"
                :value="item.paramValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <span class="labelSpan">
            党员培训情况:
          </span>
          <span class="valueSpan">
            {{addForm.trainSituation}}
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <span class="labelSpan">
            信息完整度（%）:
          </span>
          <span class="valueSpan">
            {{addForm.infoIntegrity}}
          </span>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否流动党员:" prop="isFlowPartyMember">
            <el-select v-model="addForm.isFlowPartyMember"  placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in ISNOT"
                :key="item.paramValue"
                :label="item.paramName"
                :value="item.paramValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isOutGoing">
          <span class="labelSpan">
            外出流向:
          </span>
          <span class="valueSpan">
            {{addForm.outgoingFlow}}
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="是否失联党员:" prop="isLostPartyMember">
            <el-select v-model="addForm.isLostPartyMember"  placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in ISNOT"
                :key="item.paramValue"
                :label="item.paramName"
                :value="item.paramValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="党内职务:" prop="sysOrgPost">
              <el-select v-model="sysOrgPost" multiple placeholder="请选择用户角色">
                <el-option
                  v-for="item in sysOrgPostList"
                  :key="item.paramValue"
                  :label="item.paramName"
                  :value="item.paramValue">
                </el-option>
              </el-select>
            </el-form-item>
        </el-col>
      </el-row>
      <el-row  v-if="isLostMember">
        <el-col :span="8">
          <span class="labelSpan">
            失联具体情形:
          </span>
          <span class="valueSpan">
            {{addForm.lostSituation}}
          </span>
        </el-col>
        <el-col :span="8">
          <span class="labelSpan">
            失去联系时间:
          </span>
          <span class="valueSpan">
            {{addForm.lostTime}}
          </span>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</div>
</template>
<script>
import Loading from '@/components/loading/loading'
import pagination from '@/components/pagination/index'
import { getPartyUserList, partyUserDetail } from '@/api/party/partyUser'
import { transform } from '@/utils/trans'

export default {
  components: {
    Loading,
    pagination
  },
  data() {
    this.permissionHandle = this.$permissionHandle
    return {
      dialogTitle: '',
      loading: false,
      joinPartyDates: [],
      formalPartyDates: [],
      totalNum: 0,
      SearchDep: {
        name: '',
        idNumber: '',
        joinPartyDate: '', // 入党开始时间
        createTime: '', // 入党结束时间（该参数只是为了能够查询入党时间起始时间段的数据）
        partyOrgInfoKey: '',
        sysOrgPost: '',
        formalPartyDate: '', // 转正开始时间
        modifyTime: '', // 转正结束时间  （该参数只是为了能够查询转正时间起始时间段的数据）
        pageSize: '10',
        pageNum: '1'
      },
      paginations: {
        totalNum: 0,
        currentPage: 1,
        pageSize: 10
      },
      deleteDep: {
        orgKey: ''
      },
      // 是否是党员
      isPartyMember: false,
      // 是否是失联党员
      isLostMember: false,
      // 是否流动党员
      isOutGoing: false,
      // 页面所有参数
      EDUCATION: [], // 学历
      MARITALSTATUS: [], // 婚姻状况
      NATION: [], // 民族
      NEWSOCIALTYPE: [], // 新社会阶层类型
      POST: [], // 工作岗位类型
      SEX: [], // 性别
      TECHNICALPOSITION: [], // 聘任专业技术职务类型
      TYPE: [], // 人员类别
      ISNOT: [], // 是否询问
      allDepartmentData: [],
      tableData: [],
      // 禁用表单
      ifDisabled: false,
      // 新增角色数据
      addForm: {
        userAccount: '',
        userName: '',
        phone: '',
        orgKey: '',
        isPartyMember: '002',
        partyOrgInfoKey: '',
        idNumber: '',
        sex: '',
        nation: '',
        natives: '',
        isTwNative: '',
        birthday: '',
        education: '',
        type: '',
        joinPartyDate: '',
        formalPartyDate: '',
        post: '',
        joinWorkDate: '',
        address: '',
        mobilePhone: '',
        maritalStatus: '',
        archivesMngUnit: '',
        technicalPosition: '',
        newSocialType: '',
        frontlineSituation: '',
        trainSituation: '',
        isMigrantWorker: '',
        isLostPartyMember: '002',
        isFlowPartyMember: '002',
        outgoingFlow: '',
        infoIntegrity: '',
        lostSituation: '',
        lostTime: ''
      },
      sysOrgPost: [],
      sysOrgPostList: [],
      orgName: '',
      partyOrgName: '',
      SearchpartyOrgName: '',
      dialogFormVisible: false, // 新增弹出框状态
      // 列表所选数据集合
      multipleSelection: [],
      // 组织机构
      orgData: [],
      // 党政机构
      partyOrgData: [],
      defaultProps: {
        value: 'orgKey',
        parentId: 'parOrg',
        children: 'children',
        label: 'orgName'
      },
      partyProps: {
        value: 'partyOrgKey',
        parentId: 'parPartyOrgInfoKey',
        children: 'children',
        label: 'partyOrgName'
      }
    }
  },
  watch: {
    addForm: {
      handler(val, oldVal) {
        if (val.isPartyMember === '001') {
          this.isPartyMember = true
        } else {
          this.isPartyMember = false
        }

        if (val.isLostPartyMember === '001') {
          this.isLostMember = true
        } else {
          this.isLostMember = false
        }
        if (val.isFlowPartyMember === '001') {
          this.isOutGoing = true
        } else {
          this.isOutGoing = false
        }
      },
      deep: true
    },
    dialogFormVisible: function() {
      if (this.dialogFormVisible === false) {
        this.partyOrgName = ''
        this.orgName = ''
        this.$refs['addForm'].resetFields()
      }
    },
    isPartyMember: function() {

    }
  },
  created() {
    this.getList()
  },
  updated() {
    this.getNodes()
  },
  methods: {
    getDates(val) {
      if (val !== null) {
        this.SearchDep.joinPartyDate = this.joinPartyDates[0]
        this.SearchDep.createTime = this.joinPartyDates[1]
      } else {
        this.SearchDep.joinPartyDate = ''
        this.SearchDep.createTime = ''
      }
    },
    getDateOther(val) {
      if (val !== null) {
        this.SearchDep.formalPartyDate = this.formalPartyDates[0]
        this.SearchDep.modifyTime = this.formalPartyDates[1]
      } else {
        this.SearchDep.formalPartyDate = ''
        this.SearchDep.modifyTime = ''
      }
    },
    resetSearch() {
      this.joinPartyDates = []
      this.formalPartyDates = []
      this.SearchpartyOrgName = ''
      this.SearchDep.name = ''
      this.SearchDep.idNumber = ''
      this.SearchDep.joinPartyDate = ''
      this.SearchDep.createTime = ''
      this.SearchDep.partyOrgInfoKey = ''
      this.SearchDep.sysOrgPost = ''
      this.SearchDep.formalPartyDate = ''
      this.SearchDep.modifyTime = ''
      this.getList()
    },
    blurSearch() {
      this.SearchDep.pageNum = 1
      this.getList()
      this.paginations.currentPage = 1
    },
    getNodes() {
      // // 默认选中组织机构
      if (this.dialogFormVisible) {
        if (this.$refs.orgTree) {
          this.orgName = this.$refs.orgTree.getNode(this.addForm.orgKey).data.orgName
        }
        if (this.$refs.partyOrgTree) {
          this.partyOrgName = this.$refs.partyOrgTree.getNode(this.addForm.partyOrgInfoKey).data.partyOrgName
        }
      }
    },
    handleDetail(index, row) {
      this.dialogFormVisible = true
      this.dialogTitle = '党员信息详细'
      this.addForm = {
        userKey: row.userKey,
        partyMemberInfoKey: row.partyMemberInfoKey
      }
      this.getDetail('detail')
    },

    // 用户列表
    getList() {
      this.loading = true
      return new Promise((resolve, reject) => {
        getPartyUserList(this.SearchDep).then(response => {
          // console.log(this.SearchDep)
          this.tableData = response.data.entity.items
          this.paginations.totalNum = parseInt(response.data.entity.itemsTotalCount)
          this.partyOrgData = transform(response.data.partyOrgList, 'partyOrgKey', 'parPartyOrgInfoKey', 'children')
          this.sysOrgPostList = response.data.sysOrgPost
          resolve()
          this.loading = false
        }).catch(error => {
          this.loading = false
          reject(error)
        })
      })
    },

    // 用户编辑及用户新增参数等信息
    getDetail(parmater) {
      return new Promise((resolve, reject) => {
        partyUserDetail(this.addForm).then(response => {
          this.EDUCATION = response.data.EDUCATION
          this.MARITALSTATUS = response.data.MARITALSTATUS
          this.NATION = response.data.NATION
          this.NEWSOCIALTYPE = response.data.NEWSOCIALTYPE
          this.POST = response.data.POST
          this.SEX = response.data.SEX
          this.TECHNICALPOSITION = response.data.TECHNICALPOSITION
          this.TYPE = response.data.TYPE
          this.sysOrgPostList = response.data.sysOrgPost
          if (response.data.entity.sysOrgPost) {
            this.sysOrgPost = JSON.parse(response.data.entity.sysOrgPost)
            this.addForm.sysOrgPost = this.sysOrgPost
          }
          this.ISNOT = response.data.ISNOT
          this.orgData = transform(response.data.orgList, 'orgKey', 'parOrg', 'children')
          this.partyOrgData = transform(response.data.partyOrgList, 'partyOrgKey', 'parPartyOrgInfoKey', 'children')
          if (parmater === 'detail') {
            this.addForm = response.data.entity
          } else {
            this.$refs['addForm'].resetFields()
            this.addForm = { isPartyMember: '002' }
          }
          this.loading = false
          resolve()
        }).catch(error => {
          this.loading = false
          reject(error)
        })
      })
    },
    // 改变分页的时候查询数据
    handleSizeChange(val) {
      this.SearchDep.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.SearchDep.pageNum = val
      this.getList()
    },
    handleNodeClick(data) {
      this.SearchpartyOrgName = data.partyOrgName
      this.SearchDep.partyOrgInfoKey = data.partyOrgKey
    }
  }
}
</script>
<style lang="scss" scoped>
  .tree-input{
    position: relative;
    margin-bottom:0;
    .el-form-item__content{line-height: auto;}
  }
  .input-tree{
      width: 100%;
      .el-scrollbar__wrap{overflow: auto;}
    }
    .tree-select,.el-date-editor{width: 100%;}
</style>
